<template>
    <div class="login-container">
        <el-form :model="formData" ref="loginForm" :rules="formRules" label-position="left" label-width="0px"
            autocomplete="on" class="login-form" v-loading="loading">
            <h3 class="login-title">小程序商城运营平台登录</h3>
            <el-form-item prop="loginAccount">
                <el-input prefix-icon="el-icon-user-solid" placeholder="账号" clearable
                    v-model.trim="formData.loginAccount" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="loginPassword">
                <el-input prefix-icon="el-icon-s-tools" placeholder="密码" clearable v-model.trim="formData.loginPassword">
                </el-input>
            </el-form-item>
            <el-form-item prop="captcha">
                <el-row :gutter="20" class="flex alcenter">
                    <el-col :span="12">
                        <el-form-item>
                            <el-input prefix-icon="el-icon-s-tools" placeholder="请输入验证码" clearable
                                v-model.trim="formData.captcha"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-image class="flex alcenter login-captcha" :src="captcha" @click="getCaptcha">
                        </el-image>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="login-button" @click.native.prevent="handleLogin">登录</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" class="login-button" native-type="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- <div class="login-footer">
      <p>Copyright © 2018-2021 星宸 提供技术支持.</p>
    </div> -->
    </div>
</template>

<script>
    import {
        mapActions
    } from "vuex";

    import {
        LoginService
    } from "@/api/index";

    import {
        copyObj
    } from '@/utils/index.js'

    export default {
        data() {
            return {
                captcha: '',
                loading: false,
                formData: {
                    loginAccount: "",
                    loginPassword: "",
                    captcha: "",
                    key: "",
                },
                formRules: {
                    loginAccount: [{
                            required: true,
                            message: "请输入账号",
                            trigger: "blur",
                        },
                        {
                            min: 5,
                            max: 20,
                            message: "账号长度在 5 到 20 个字符",
                        },
                    ],
                    loginPassword: [{
                            required: true,
                            message: "请输入密码",
                            trigger: "blur",
                        },
                        {
                            min: 6,
                            max: 20,
                            message: "密码长度在 5 到 20 个字符",
                        },
                    ],
                    captcha: [{
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur",
                    }],
                },
            };
        },
        async created() {
            await this.getCaptcha();
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate(async (value) => {
                    if (value) {
                        try {
                            this.loading = true;
                            let res = await LoginService.login(this.formData);
                            if (res.code == 200) {
                              this.$router.push('/')
                            }
                        } catch (error) {
                            console.log(error);
                        } finally {
                            this.loading = false;
                        }
                    }
                });
            },
            async getCaptcha() {
                let res = await LoginService.captcha();
                if (res.code == 200) {
                    this.captcha = res.result.base64;
                    this.formData.key = res.result.key
                }
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                vm.getCaptcha();
            });
        },
    };
</script>

<style lang="scss" scoped>
    .login-container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url(/static/images/login-background.jpg);
        background-size: cover;
        padding: 20px;
    }

    .login-form {
        position: relative;
        border-radius: 6px;
        background: #fff;
        width: 350px;
        padding: 25px 25px 5px 25px;
        background-color: transparent;
    }

    .login-title {
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
    }

    .login-button {
        width: 100%;
    }

    .login-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .login-captcha {
        width: 164px;
        height: 60px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>
